<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" v-model="allstatus" @change="changeAll" />
    </label>
    <span>
      <span>已完成{{ jisuan.ok }}</span> / 全部{{ jisuan.arr }}
    </span>
    <button class="btn btn-danger" @click="del">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "footerIndex",
  props: {},
  data() {
    return {
      footerList: [],
      allstatus: false,
    };
  },
  computed: {
    jisuan() {
      let count = this.footerList.reduce(
        (prev, item, index) => {
          if (item.status) {
            prev.ok += 1;
          }
          prev.arr += 1;
          return prev;
        },
        { ok: 0, arr: 0 }
      );
      return count;
    },
  },
  mounted() {
    this.$BUS.$on("footerData", (msg) => {
      this.footerList = msg;
      this.allstatus = msg.every((item) => item.status);
    });
  },
  methods: {
    changeAll() {
      //   this.footerList.forEach((item) => {
      //     item.status = this.allstatus;
      //   });
      this.$BUS.$emit("allstatusaaa", this.allstatus);
    },
    del() {
      for (
        var i = 0, flag = true, len = this.footerList.length;
        i < len;
        flag ? i++ : i
      ) {
        if (this.footerList[i] && this.footerList[i].status == true) {
          this.footerList.splice(i, 1);
          flag = false;
        } else {
          flag = true;
        }
      }
    },
  },
};
</script>

<style scoped>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>
